<template>
	<view class="center">
		<view class="center_list flexs2" v-for="(item,index) in bueList" :key="index" @click="gokecheng(item.id)">
			<view class="center_image">
				<image :src="picture.getImgUrl(item.image)" mode=""></image>
				<slot></slot>
			</view>
			<view class="center_right">
				<view class="top_titles">{{item.name}}</view>
				<view v-show='tabCurrentIndex ==4' class="zhichang_time">{{item.createtime}}</view>
				<view class="center_study" v-show="tabCurrentIndex ==1 || tabCurrentIndex ==2">
					<image src="../../static/img/cef.png" mode=""></image>
					{{item.buy_num}}人已学习
				</view>
				<view class="center_btm">
					<view class="center_pay" v-show="tabCurrentIndex ==1 || tabCurrentIndex ==2">{{item.all_num}}套资料|真题
					</view>
					<view class="cemter_last" v-show="tabCurrentIndex != 4">
						<span>￥</span>
						{{tabCurrentIndex == 3 ? item.price :item.now_price}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			bueList: {
				typeof: Array
			},
			tabCurrentIndex: {
				typeof: Number,
				default:1
			}
		},
		data() {
			return {

			}
		},
		methods: {
			gokecheng(id) {
				console.log(this.tabCurrentIndex);
				switch (this.tabCurrentIndex) {
					case 1:
					case 2:
						uni.navigateTo({
							url: `/pages/data/kecheng?id=${id}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pages/data/kechengZg?id=${id}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pages/data/zixundetails?id=${id}`
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 0 30rpx;

		.center_list {
			width: 100%;
			height: 190rpx;

			.center_image {
				width: 196rpx;
				height: 130rpx;
				border-radius: 10rpx;
				background-size: 100% 100%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

				.center_type {
					width: 70rpx;
					height: 30rpx;
					background: #ff3b30;
					border-radius: 10rpx 0 10rpx 0;
					color: #fff;
					font-size: 22rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					top: -136rpx;
					left: 0rpx;
				}
			}

			.center_right {
				width: 474rpx;
				height: 100%;
				border-bottom: solid 1rpx #f5f5f5;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-direction: column;
				padding-bottom: 30rpx;

				.top_titles {
					color: #333;
					font-size: 28rpx;
					font-weight: 700;
				}

				.center_study {
					margin-top: 6rpx;
					color: #666;
					font-size: 24rpx;

					image {
						width: 28rpx;
						height: 26rpx;
						margin-right: 6rpx;
					}
				}

				.center_btm {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

				}

				.center_pay {
					font-size: 22rpx;
					color: #999;
				}

				.cemter_last {
					text-align: end;
					font-size: 34rpx;
					color: #ff3b30;
					font-weight: 700;
				}
			}

			.zhichang_time {
				height: 70rpx;
				color: #999;
				font-size: 24rpx;
				line-height: 60rpx;
			}
		}

	}
</style>
